<template>
  <div>
    <el-dialog
      title="添加物料"
      width="640px"
      :visible.sync="dialogVisible"
    >
      <p>
        <el-input
          v-model="searchVal"
          style="width: 288px"
          placeholder="输入名称/描述，至少输入3位字符"
          class="search"
          @keyup.enter.native="querygetObjectInsList"
        >
          <!-- @change="querygetObjectInsList" -->
          <el-button
            slot="append"
            icon="iconfont iconicon_magnifying"
            @click="querygetObjectInsList"
          ></el-button>
        </el-input>
      </p>
      <el-table
        v-loading="Loading"
        :data="dialogtableData"
        style="width: 100%"
        height="300"
        @selection-change="handleDialogSelectionChange"
      >
        <el-table-column
          type="selection"
          width="40"
        />

        <el-table-column
          v-for="(item, index) in dialogTableColumn"
          :key="item.id || index"
          :prop="item.prop"
          :label="item.label"
          :type="item.type"
          :min-width="item.minWidth"
          :width="item.width"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row }">
            <template v-if="item.prop === 'status'">
              <span>{{ status[row[item.prop]] }}</span>
            </template>
            <template v-else><span>{{ row[item.prop] }}</span></template>
          </template>
        </el-table-column>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" type="text" @click="handleClose">取 消</el-button>
        <el-button class="submit-btn" type="primary" plain @click="handelSave">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getObjectInsList, addObjectbom, addsObjectBomReplace } from '@/api/frontPage/materials'
import { mapGetters } from 'vuex'
export default {
  name: 'DialogAdd',
  components: {
  },
  data() {
    return {
      searchVal: '',
      dialogVisible: false,
      Loading: true,
      isBomAdd: 1,
      multipleSelection: [],
      dialogtableData: [],
      dialogTableColumn: [
        { label: '编码', prop: 'instanceNumber', minWidth: '70px' },
        { label: '描述', prop: 'description', minWidth: '70px' },
        { label: '单位', prop: 'unit', minWidth: '70px' },
        { label: '生命周期', prop: 'status', minWidth: '70px' }
      ],
      status: {
        '1': '草稿',
        '2': '流程中',
        '3': '已发布',
        '4': '已禁用'
      }
    }
  },
  inject: ['refreshTree'],
  computed: {
    ...mapGetters(['workspaceId'])
  },
  watch: {
    dialogVisible(val) {
      val && this.querygetObjectInsList()
    }
  },
  created() {
    this.querygetObjectInsList()
  },
  methods: {
    /* 替代料添加 */
    addsObjectBomReplaceData() {
      if (!this.multipleSelection.length) return this.$message.warning('还没有勾选')
      const query = {
        bomId: this.$parent.id,
        replaceIds: this.multipleSelection
      }
      addsObjectBomReplace(query).then((res) => {
        this.$message.success(res.message)
        console.log(this.$parent.$refs.dialogAlternativeMaterials)

        this.$parent.$refs.dialogAlternativeMaterials.getAllBomReplaceData()
        this.refreshTree()
      })
    },
    /**
     * 添加bom 绑定
     * @description 对象实例-bom维护-添加bom(objectId:实例的id,objectBomId:为需要绑定为bom的实例id)
     */
    addObjectbomData() {
      if (!this.multipleSelection.length) return this.$message.warning('还没有勾选')
      const query = {
        objectId: this.$parent.id,
        objectBomId: this.multipleSelection
      }
      addObjectbom(query).then((res) => {
        console.log(2)

        this.$message.success(res.message)
        this.$parent.queryBomListData()
        this.refreshTree()
      })
    },
    handelSave() {
      if (this.isBomAdd) {
        this.addObjectbomData()
      } else {
        this.addsObjectBomReplaceData()
      }

      this.handleClose()
    },
    /**
     * 对象实例-bom维护-物料列表
     * @params {search|objectType} search:列表搜索字段  objectType:  1.物料(默认)2.文档3.变更请求4.变更指令  status  1.草稿2.流程中3.已发布4.已禁用
     */
    querygetObjectInsList() {
      const query = {
        workspaceId: this.workspaceId,
        objectType: '1',
        search: this.searchVal,
        status: ''
      }
      this.Loading = true
      getObjectInsList(query).then((res) => {
        this.Loading = false
        this.dialogtableData = res.result
      })
    },
    /** 关闭 */
    handleClose() {
      this.dialogVisible = false
      this.searchVal = ''
      this.multipleSelection = []
      this.isBomAdd = 1
    },
    handleDialogSelectionChange(val) {
      this.multipleSelection = val.map(el => el.id)
    }
  }
}
</script>

<style lang="scss" scoped></style>
